<template>
  <view>
    <live-pusher id="livePusher" ref="livePusher" class="livePusher" url="" :mode="mode" :muted="true"
      :enable-camera="enableCamera" :auto-focus="autoFocus" :beauty="beauty" whiteness="whiteness"
      device-position="devicePosition" @statechange="statechange" @netstatus="netstatus" @error="error"
      :style="{'height' : windowHeight + 'px' }" style="width:750rpx">
    </live-pusher>

    <view v-if="showBars">

      <view style="position: fixed; left : 0; right : 0; height: 500rpx;" :style="{'top' : statusBarHeight + 'px'}">

        <!-- 关闭符号 -->
        <view class="flex align-center justify-center" style="width: 90rpx; height:90rpx; background-color: yellow;">
          <text class="iconfont text-white">&#xe607;</text>
        </view>

        <!-- 输入直播间标题 -->
        <view class="position-absolute rounded  p-2 flex align-center"
          style="left: 90rpx; right : 100rpx; height: 160rpx; background-color: rgba(0,0,0,0.2);">
          <view class="position-relative rounded" style="width: 120rpx; height: 120rpx;">
            <image src="/static/gift/3.png" style="width: 120rpx; height: 120rpx;"></image>
            <text class="text-white position-absolute font" style="left:0; right:0; bottom:0;">更换封面</text>
          </view>
          <view class="flex-1 ml-2">
            <input class="mb-2" type="text" value="" placeholder="请输入直播间标题" />
            <text class="text-white font">#请选择分类</text>
          </view>
        </view>

        <!-- 工具 -->
        <view class="position-absolute right-0 flex flex-column" style="width: 100rpx;">

          <view @click="switchCamera" style="height: 120rpx; width: 100rpx;"
            class="flex flex-column align-center justify-center">
            <text class="iconfont text-white mb-1">&#xe605;</text>
            <text class="text-white font">翻转</text>
          </view>
          <view @click="openPopup('mode')" style="height: 120rpx; width: 100rpx;"
            class="flex flex-column align-center justify-center">
            <text class="iconfont text-white mb-1">&#xe60c;</text>
            <text class="text-white font">画质</text>
          </view>
          <view @click="openPopup('beauty')" style="height: 120rpx; width: 100rpx;"
            class="flex flex-column align-center justify-center">
            <text class="iconfont text-white mb-1">&#xe632;</text>
            <text class="text-white font">美颜</text>
          </view>
          <view @click="openPopup('whiteness')" style="height: 120rpx; width: 100rpx;"
            class="flex flex-column align-center justify-center">
            <text class="iconfont text-white mb-1">&#xe631;</text>
            <text class="text-white font">美白</text>
          </view>

        </view>
      </view>

      <!-- 开启直播按钮 -->
      <view class="position-fixed bg-main flex align-center justify-center rounded-circle"
        style="left : 100rpx; right : 100rpx; bottom: 100rpx; height : 120rpx;" @click="openLiveRoom">
        <text class="text-white font-md ">开始视频直播</text>
      </view>

      <uni-popup type="bottom" ref="popup">
        <view class="bg-white">
          <view class="flex align-center justify-center border-bottom" style="height : 90rpx;">
            <text class="font">{{popupTitle}}</text>
          </view>
          <!-- 画质选择 -->
          <view v-if="popupType === 'mode'">
            <view @click="chooseMode(item)" v-for="(item,index) in modeList" :key="index"
              :class="mode === item.type ? 'bg-main' : ''" class="flex align-center justify-center py-2 "
              hover-class="bg-light">
              <text class="font-md " :class="mode === item.type ? 'text-white' : ''">{{item.desc}}</text>
            </view>
          </view>
          <!-- 美颜 -->
          <view v-else-if="popupType === 'beauty'">
            <slider show-value :block-size="18" :min="0" :max="9" :step="1" :value="beauty"
              @change="handleSliderChange" />
          </view>
          <!-- 美白 -->
          <view v-else-if="popupType === 'whiteness'">
            <slider show-value :block-size="18" :min="0" :max="9" :step="1" :value="whiteness"
              @change="handleSliderChange" />
          </view>
          <view class="f-divider"></view>
          <view class="flex align-center justify-center " style="height : 90rpx;">
            <text class="font">取消</text>
          </view>
        </view>
      </uni-popup>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 屏幕的高度
      windowHeight: 0,
      // 保存live-pusher 实例对象
      context: null,
      // 保存状态栏高度
      statusBarHeight: 0,
      // 保存工具点击切换的状态
      popupType: "mode",
      showBars: true,
      // 画质数据列表
      modeList: [
        {
          type: "SD",
          desc: "标清",
        },
        {
          type: "HD",
          desc: "高清",
        },
        {
          type: "FHD",
          desc: "超清",
        },
      ],
      // 推流地址，支持RTMP协议。
      url: "",
      // 推流视频模式，可取值：SD（标清）, HD（高清）, FHD（超清）。
      mode: "SD",
      // 开启摄像头
      enableCamera: true,
      // 自动聚集
      autoFocus: true,
      // 美颜，取值范围 0-9（iOS取值范围为1） ，0 表示关闭。
      beauty: 0,
      // 美白，取值范围 0-9（iOS取值范围为1） ，0 表示关闭。
      whiteness: 0,
      // 前置或后置，值为front, back
      devicePosition: "back",
    };
  },
  onLoad() {
    const res = uni.getSystemInfoSync();
    this.windowHeight = res.windowHeight;
    this.statusBarHeight = res.statusBarHeight;
  },
  onReady() {
    this.context = uni.createLivePusherContext("livePusher", this);
    this.startPreview();
  },
  onBackPress() {
    this.showBars = false;
  },
  computed: {
    popupTitle() {
      let o = {
        mode: "画质",
        beauty: "美颜",
        whiteness: "美白",
      };
      return o[this.popupType];
    },
  },
  methods: {
    // 切换相机镜头
    switchCamera() {
      this.context.switchCamera({
        success: (e) => {
          console.log(e);
          this.devicePosition =
            this.devicePosition === "back" ? "front" : "back";
        },
      });
    },
    // 拉起popup弹窗
    openPopup(type) {
      this.popupType = type;
      this.$refs.popup.open();
    },
    // 切换画质
    chooseMode(item) {
      this.mode = item.type;
      uni.showToast({
        title: "画质切换为" + item.desc,
        icon: "none",
      });
      this.$refs.popup.close();
    },
    // 开启预览
    startPreview() {
      this.context.startPreview({
        success: (e) => {
          console.log(e);
        },
      });
    },
    openLiveRoom() {
      uni.navigateTo({
        url: `../liveroom/liveroom`,
      });
    },
    // 拖动滑块触发的方法
    handleSliderChange(e) {
      this[this.popupType] = e.detail.value;
    },
    // 监听直播状态的变化
    statechange(e) {
      console.log(e);
    },
    // 监听直播网络状态变化
    netstatus(e) {
      console.log(e);
    },
    // 监听直播错误变化
    error(e) {
      console.log(e);
    },
  },
};
</script>

<style></style>